<template>
	<div class="training_resources">
		<div class="training_header_desktop hidden-xs-only">
			<div class="wrapper">
				<div class="body">
					<div class="title">
						<h4>在线学习</h4>
						<p>zaixianxuexi</p>
					</div>
					<el-breadcrumb separator-class="el-icon-arrow-right">
						<template v-for="(item, index) in crumbsArrs">
							<el-breadcrumb-item v-if="crumbsArrs.length - 1 === index">{{ item.meta.title }}</el-breadcrumb-item>
							<el-breadcrumb-item :to="item.redirect || item.path" v-else>{{ item.meta.title }}</el-breadcrumb-item>
						</template>
					</el-breadcrumb>
				</div>
			</div>
		</div>
		<!-- <div class="training_header_phone hidden-sm-and-up">
			<div class="title">
				<h4>在线学习</h4>
				<p>zaixianxuexi</p>
			</div>
		</div> -->
		<router-view></router-view>
	</div>
</template>

<script>
export default {
	data() {
		return {};
	},
	computed: {
		crumbsArrs() {
			let matcheds = this.$route.matched || [];
			return matcheds.filter((n) => !!n.meta.title);
		}
	}
};
</script>

<style lang="scss" scoped>
.training_resources::v-deep {
	flex: 1;
	display: flex;
	flex-direction: column;
	background: url('~@/assets/img/course_body.png') no-repeat center;
	background-size: cover;
	padding-bottom: 10px;
	.el-card {
		margin-top: 10px;
	}
	.el-card__header {
		padding: 16px;
	}
	.el-card__body {
		padding: 0;
	}
}
.training_header_desktop,
.training_header_phone {
	position: relative;
	height: 144px;
	flex-shrink: 0;
	&::before {
		position: absolute;
		top: 0;
		left: 0;
		content: '';
		z-index: 1;
		width: 100%;
		bottom: 36px;
		background: url('~@/assets/img/course_head.png') no-repeat center;
		background-size: cover;
	}
	.title {
		position: relative;
		z-index: 1;
		h4 {
			font-size: 24px;
			line-height: 1;
		}
		p {
			color: #606266;
			line-height: 1;
			margin-top: 8px;
			text-transform: uppercase;
		}
	}
}
.training_header_desktop {
	padding-top: 72px;
	box-sizing: border-box;
	.wrapper,
	.body {
		position: relative;
		height: 72px;
		&::before {
			position: absolute;
			top: 0;
			width: 100%;
			content: '';
			overflow: hidden;
		}
	}
	.wrapper {
		z-index: 2;
		&::before {
			right: 100%;
			height: 100%;
			background-color: rgb(255, 219, 178);
		}
	}
	.body {
		display: inline-flex;
		align-items: center;
		padding-right: 100px;
		&::before {
			left: -10px;
			height: 0;
			border-right: solid 72px transparent;
			border-bottom: solid 72px rgb(255, 219, 178);
		}
	}
	.title {
		padding-right: 20px;
		border-right: solid 1px #606266;
	}
	.el-breadcrumb {
		position: relative;
		z-index: 1;
		font-size: 16px;
		margin-left: 20px;
	}
}
.training_header_phone {
	height: 108px;
	&::before {
		bottom: 0;
	}
	.title {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
}
</style>
